<template>
	<view class="my-search-container" style="background-color: {{bgcolor}};" bind:tap="searchBox">
	          <view class="my-search-box">
	            <van-icon name="search" size="20px"/>
	            <text class="placeholder">搜索</text>
	          </view>
	</view>
</template>

<script>
	export default {
		props:{
			//背景颜色
			bgcolor: {
			  type: String,
			  default: '#C00000'
			},
			// 圆角尺寸
			radius: {
			  type: Number,
			  // 单位是 px
			  default: 18
			}
		}
		name:"my-search",
		data() {
			return {
				
			};
		},
		methods:{
			searchBox(){
			  this.triggerEvent('searchBox')
			}
		}
	}
</script>

<style lang="scss">
.my-search-container{
  height: 50px;
  // background-color: #c00000
  display: flex;
  align-items: center;
  padding: 10px;
  .my-search-box{
    height: 30px;
    background-color: #ffff;
    border-radius: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
      .placeholder{
              font-size: 15px;
      }
  }
}
</style>